<template>
  <div class="access_wrapper">
    <div class="item">
      <img src="@/assets/image/jie_ru/user.png" />
      <p>
        用户数 <span class="user_text">37<u>户</u></span>
      </p>
    </div>
    <div class="item">
      <img src="@/assets/image/jie_ru/device.png" />
      <p>
        设备总数<span class="device_text">100<u>台</u></span>
      </p>
    </div>
    <div class="item">
      <img src="@/assets/image/jie_ru/fire.png" />
      <p>
        消防主机<span class="xiaofang_text">34<u>台</u></span>
      </p>
    </div>
    <div class="item">
      <img src="@/assets/image/jie_ru/mini_fire.png" />
      <p>
        微型消防<span class="weidong_text">14<u>座</u></span>
      </p>
    </div>
    <div class="item">
      <img src="@/assets/image/jie_ru/device.png" />
      <p>
        NB设备 <span class="NB_text">37<u>户</u></span>
      </p>
    </div>
    <div class="item">
      <img src="@/assets/image/jie_ru/warning.png" />
      <p>
        隐患数 <span class="yinhuan_text">5<u>次</u></span>
      </p>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.access_wrapper {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  column-gap: px(20);
  row-gap: px(20);
  // padding-top: px(23);
  // align-content: flex-start;
  justify-content: center;
  align-content: center;
  padding-left: 6%;
  min-height: px(150);
  .item {
    display: flex;
    color: #fff;
    width: px(140);
    > img {
      width: px(31);
      height: px(39);
      object-fit: cover;
    }
    > p {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 0;
      margin-left: px(12);
      font-size: px(14);
      > span {
        font-size: px(16);
        font-weight: bold;
        margin-top: px(2);
        > u {
          font-size: px(14);
          margin-left: px(10);
          text-decoration: none;
        }
      }
    }
  }
}
</style>
